
import React from 'react';
import {withRouter} from 'react-router';
import { WeaTableEdit,WeaRightMenu,WeaTop } from 'ecCom';
import { Button } from 'antd';
import { toJS } from 'mobx';
import {inject, observer} from "mobx-react";

@inject('stageSetStore')
@withRouter
@observer
 class StageSetList extends React.Component {

    constructor(props) {
        super(props);
    }
    componentDidMount(){
        const {prjid} = this.props;
        const { location, stageSetStore } = this.props;
        if(prjid==''||prjid==null){
            stageSetStore.initData(location.query.prjid);
        }else{
            stageSetStore.initData(prjid);
        }
    }

    componentWillUnmount() {
        const { stageSetStore } = this.props;
        stageSetStore.clearStageStatus();
    }

    componentWillReceiveProps(nextProps) {
        const {prjid} = this.props;
        if(prjid==''||prjid==null){
            if (this.props.location.key !== nextProps.location.key) {
                const { location, stageSetStore } = nextProps;
                stageSetStore.initData(location.query.prjid);
            }
        }else{
            if (this.props.prjid !== nextProps.prjid) {
                const { stageSetStore } = nextProps;
                stageSetStore.initData(prjid);
            }
        }
    }

    render() {
        const { stageSetStore } = this.props;
        const { stageInfo : { stageColumns, stageColumnDatas, selectedDatas, selectedRowKeys }, onRowSelect, onChange } = stageSetStore;
        return ( 
            <div style={{backgroundColor:"white",height:"80%"}}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qa4yfi`}
                    buttons={this.getButtons()}
                    showDropIcon={true}
                    dropMenuDatas={this.getRightMenu()}
                    onDropMenuClick={this.onRightMenuClick.bind(this)}
                />
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@snj8qq`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
                    {stageColumns && stageColumns.length>0 &&<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@z9gfdx`}
                        draggable={true}
                        showTitle={false}
                        columns={toJS(stageColumns)}
                        datas={stageColumnDatas}
                        onChange={onChange}
                        onRowSelect={onRowSelect}
                        selectedData={selectedDatas}
                        selectedRowKeys={selectedRowKeys}
                        getRowSelection={this.getRowSelection}
                        copyFilterProps={["id"]}
                        rowKey={"id"}
                        ref={"StageList"}
                    />}
                </WeaRightMenu>
            </div>
          )

    }

    getRowSelection = (rowSelection) => {
        let sel = { ...rowSelection };
        sel.getCheckboxProps = (record) => {
            return { disabled: record.candel == false };
        }
        return sel;
    }

    getRightMenu() {
        const { stageSetStore } = this.props;
        const { rightMenu } = stageSetStore;
        let btnArr = [];
        rightMenu && rightMenu.length > 0 && rightMenu.map(m => {
            let disabled = false;
            if (stageSetStore.stageInfo.selectedRowKeys.length == 0) {//项目卡片
                if (m.type == "BTN_COPY" || m.type == "BTN_DELETE") {
                    disabled = true;
                }
            }
            btnArr.push({
                icon: <i className={m.menuIcon} />,
                content: m.menuName,
                disabled: disabled
            })
        });
        return btnArr
    }

    onRightMenuClick(key) {
        let that = this;
        const { stageSetStore  } = this.props;
        const { rightMenu } = stageSetStore;
        rightMenu && rightMenu.length > 0 && rightMenu.map((m, i) => {
            if (Number(key) == i) {

                if (m.type == 'BTN_ADD_SHARE') { //新增
                    this.refs.StageList.refs.edit.doAdd()
                } else if (m.type == "BTN_DELETE") {  //删除
                    this.refs.StageList.refs.edit.doDelete()
                } else if (m.type == "BTN_COPY") {  //复制
                    this.refs.StageList.refs.edit.doCopy()
                } else if (m.type == "BTN_SUBMIT") {  //保存
                    const checkProps = this.refs.StageList.refs.edit.doRequiredCheck();
                    stageSetStore.saveStageSet(checkProps);
                }
                if (m.type == "BTN_COLUMN") {  //显示定制
                    stageSetStore.onShowColumn();
                }
            }
        });
    }

    getButtons() {
        const { stageSetStore  } = this.props;
        const { rightMenu } = stageSetStore;
        let btnArr = [];
        rightMenu && rightMenu.length > 0 && rightMenu.map((m, i) => {
            let disabled = false;
            if (stageSetStore.stageInfo.selectedRowKeys.length == 0) {//项目卡片
                if (m.type == "BTN_COPY" || m.type == "BTN_DELETE") {
                    disabled = true;
                }
            }
            m.isTop == '1' && btnArr.length < 4 && btnArr.push(
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@l0irjs@${m.type}`} type="primary"
                    disabled={disabled}
                    onClick={() => {
                        if (m.type == 'BTN_ADD_SHARE') { //新增
                            this.refs.StageList.refs.edit.doAdd()
                        } else if (m.type == "BTN_DELETE") {  //删除
                            this.refs.StageList.refs.edit.doDelete()
                        } else if (m.type == "BTN_COPY") {  //复制
                            this.refs.StageList.refs.edit.doCopy()
                        } else if (m.type == "BTN_SUBMIT") {  //保存
                            const checkProps = this.refs.StageList.refs.edit.doRequiredCheck();
                            stageSetStore.saveStageSet(checkProps);
                        }
                        if (m.type == "BTN_COLUMN") {  //显示定制
                            stageSetStore.onShowColumn();
                        }
                    }}
                >
                    {m.menuName}
                </Button>
            );
        });
        return btnArr;
    }
    
}

export default StageSetList;

